<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrap{
        padding: 15px 10px;
      }
      .cell{
        margin-bottom: 10px;
      }
      th,td{
        padding: 10px 15px;
      }
    </style>
  </head>
  <body>
    <form
      class="wrap"
      id="upload-form"
      action="/upload"
      method="post"
      enctype="multipart/form-data"
    >
       <div class="cell">
          <label for="namespace">命名空间：</label>
          <input type="text" id="namespace" name="namespace" required autofocus>
       </div>
       <div class="cell">
           <label for="file">选择文件：</label>
           <input type="file" id="file" name="file" />
       </div>
        <div class="cell">
            <input type="submit" value="上传" />
        </div>
    
    </form>
    <div class="cantanier">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">key</th>
            <th scope="col">文件大小</th>
            <th scope="col">文件类型</th>
            <th scope="col">上传时间</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <% for (var i=0; i < list.length; i++) {%>
          <tr style="clear: both">
            <th scope="row"><%- i %></th>
            <td><%- list[i].key %></td>
            <td><%- list[i].fsize %></td>
            <td><%- list[i].mimeType %></td>
            <td><%- list[i].putTime %></td>
            <td>
              <button onclick="preViewThis(this)"  data-key=<%- list[i].key %> >预览</button>
              <button onclick="removeThis(this)"  data-key=<%- list[i].key %> >删除</button>
            </td>
          </tr>
          <% } %>
        </tbody>
      </table>
    </div>
    <div>
      <script>
        function removeThis(_this) {
          fetch('/components/qiniu/remove', {
            method: 'post',
            body:JSON.stringify({ key:_this.dataset.key }) ,
            headers: {
              'Content-Type': 'application/json',
            },
          }).then(function (data) {
            // window.location.reload();
          });
        }

        function preViewThis(_this){

          const myUrl = '<%= qiniuHost %>' +'/'+  _this.dataset.key

          window.open(myUrl, 'newwindow', 'height=350, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, addressbar=no, status=no')

        }
      </script>
    </div>
  </body>
</html>
